<template>
  <div class="category">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        :title="item.name"
        v-for="item in leftData"
        :key="item.id"
        :to="`/category/son?id=${item.id}`"
      />
    </van-sidebar>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getCategory } from '@/api/category'
export default {
  name: 'category',
  data() {
    return {
      activeKey: 0,
      leftData: [],
    }
  },
  async created() {
    const { list } = await getCategory()
    this.leftData = list.slice(1)
    this.$router.push('/category/son?id=' + this.leftData[0].id).catch(() => {})
  },
  beforeRouteUpdate(to, from, next) {
    if (to.path.indexOf('/son') === -1) {
      next(false)
    } else {
      next()
    }
  },
}
</script>

<style lang="scss" scoped>
.category {
  display: flex;
  .right {
    height: 200px;
    flex: 1;
  }
}
</style>
